<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />

    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />

    <style>
        html,
        body {
            height: 98%;
            background: transparent;
            -webkit-touch-callout: none;
            font-family: Tahoma, Geneva, sans-serif;
            font-style: normal;
        }

        #dialog {
            background-color: #fff;
            border-radius: .5rem .5rem 0 0;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            -webkit-transition: all .1s;
            transition: all .1s;
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 0;
        }

        #dialog.in {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

        .pay-true {
            margin-top: 2rem;
            justify-content: flex-end
        }

        .pay-type-item {
            height: 3.8rem;
        }

        .save-btn {
            width: 100%;
            text-align: center;
            margin-bottom: .35rem;
            border-radius: 1rem;
            margin-top: .6rem
        }

        .modal-body {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .lable-item {
            height: .7rem;
            padding: 0 .3rem;
            border: 1px solid #E93324;
            border-radius: .5rem;
            width: auto
        }

        .ma img {
            height: 3.8rem;
            width: 3.8rem;
            border-radius: 50%
        }

        .detail-btn {
            background: #FCEDEC;
            border: none;
            height: 1.15rem;
            line-height: 1.15rem;
            text-align: center;
            width: 228px
        }

        .share-info {
            padding: .25rem .4rem 1.1rem .4rem;
            background: #fff;
            /*box-shadow: 0 0 20rpx #000000;*/
            box-shadow: rgba(159, 162, 168, 0.7) 0px 0px .5rem 1px;
            -moz-box-shadow: rgba(159, 162, 168, 0.7) 0px 0px .5rem 1px;
            -webkit-box-shadow: rgba(159, 162, 168, 0.7) 0px .5rem 10px 1px;
            -o-box-shadow: rgba(159, 162, 168, 0.7) 0px 0px .5rem 1px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="dialog">
            <div class="modal-head">
                <div class="height-44">
                    保存商品海报
                </div>
                <img class="close-modal-img" src="../../image/common/guanbi.png" alt="" tapmode onclick="api.closeFrame()">
            </div>
            <div class="modal-body">
                <div class="font-12 text-color-9 height-44" style="text-align:center">将海报分享给好友</div>
                <div class="share-info font-14 text-color-3" id="poster">
                    <!-- <canvas id="canvas" width="243" height="381"></canvas> -->
                    <div class='canvas-head flex-justify-between'>
                        <div class="flex-justify-between">
                            <img id='logo-img' src="../../image/index/logo1.png" alt="" style="height:26px;width:26px;margin-right:.26rem">
                            <div class="font-12 text-color-3">
                                <div class="">
                                    邻里一起拼
                                </div>
                                <div class="">
                                    同享批发价
                                </div>
                            </div>
                        </div>

                        <img src="../../image/common/Hoshii.png" alt="" style="height:47px;width:125px">
                    </div>
                    <div class="" style="margin:.25rem 0 .53rem 0">
                        <img id='goods-img' src="../../image/index/logo1.png" alt="" style="height:228px;width:228px">
                    </div>
                    <div class='info flex-justify-between'>
                        <div class="">
                            <div class="font-16 text-color-3" style="width:145px">
                                商品名商品名商品名商品名商品名商品
                            </div>
                            <div class='flex-align-center font-10 red-text' style="margin:.25rem 0 .4rem 0">
                                <div class='lable-item'>标签</div>
                            </div>
                            <div class="money flex" style="margin-bottom:.78rem;align-items: baseline;">
                                <div class="font-20 red-text">
                                    ¥<span class="font-40">112</span>
                                </div>
                                <div class="font-14">
                                    ¥<span>120</span>
                                </div>
                            </div>
                        </div>
                        <div class="ma">
                            <img src="../../image/index/logo1.png" alt="">
                        </div>
                    </div>
                    <button class='text-color-3 font-12 detail-btn' type="button" name="button">长按识别小程序码了解商品详情</button>
                </div>
                <!-- <button class='pay-btn red-btn font-16' tapmode @click='share'>保存图片</button> -->
                <button class='height-44 red-btn font-16 save-btn' tapmode @click='canvasImg'>保存图片</button>
                <div class="">
                    <image id='html2Image' src=''></image>

                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.min.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>


<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            imagePath: "",
            showShareImage: false,
            minPrice: 66,
            maxPrice: 88,
            flag: true
        },
        methods: {
            canvasImg: function() {
                var poster = $api.byId('poster');
                var width = $api.offset(poster).w;
                var height = $api.offset(poster).h;
                var scale = 2;
                console.log(width, height)
                html2canvas(document.getElementById("poster"), {
                    dpi: window.devicePixelRatio,
                    scale: scale,
                    width: width,
                    height: height,
                    useCORS: true
                }).then(function(canvas) {
                    console.log(canvas);
                    var dataUrl = canvas.toDataURL("image/png", 1.0);
                    document.getElementById("html2Image").src = dataUrl;
                    img = canvas.replace('data:image/png;base64,', '');
                    var trans = api.require('trans');
                    trans.saveImage({
                        base64Str: img,
                        imgPath: "fs://jietu/",
                        imgName: "test.png"
                    }, function(ret, err) {
                        if (ret.status) {
                            alert(JSON.stringify(ret));
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });

                    // api.saveMediaToAlbum({
                    //     path: 'dataUrl'
                    // }, function(ret, err) {
                    //     if (ret && ret.status) {
                    //         alert('保存成功', ret);
                    //     } else {
                    //         alert('保存失败', err);
                    //     }
                    // });
                });
            },
        }
    });
    $api.addCls(dialog, 'in');

    apiready = function() {


    };
</script>


</html>
